<template>
    <div class="addSpecialGoods-form">
        <el-form-item v-if="item.url!=''" v-for="(item, index) in specialGoodsList" :key="item">
            <!-- url -->
            <img :src="item.url" style="width: 400px;height: 222px">
            <!-- goodsId -->
            <label class="el-form-item__label" v-if="index==0">头图</label>
            <label class="el-form-item__label" v-if="index!=0">商品ID</label>
            <el-input style="width: 30%;" v-model="item.goodsId" :placeholder="index==0?'专题详情页顶部bannar（可插入视频链接）':''">
            </el-input>
            <el-button @click="minus(index)" type="danger" icon="el-icon-delete" style="height: 40px"></el-button>
        </el-form-item>
        <div class="operate">
            <el-upload
                    class="upload-demo"
                    action="http://up-z0.qiniu.com"
                    :data="uploadData"
                    :file-list="fileTextUploadList"
                    :on-success="handleTextUploadSuccess"
                    :on-error="handleUploadError"
                    :before-upload="handleBeforUpload"
            >
                <el-button type="primary" icon="plus">添加专题商品</el-button>
            </el-upload>
        </div>
    </div>
</template>
<script>
    // 自定义商品属性
    export default {
        props: {
            specialGoodsList: {
                type: Array,
                required: true,
                default: []
            }
        },
        data() {
            return {
                imageUrl:'',
                uploadData: {
                    key: '',
                    token: ''
                },
                fileTextUploadList:[],
            }
        },
        watch: {//监听,如果有改变,触发父组件的函数,刷新父组件里的数组对象
            'specialGoodsList': {
                handler: function(val, oldval) {
                    this.$emit('specialGoodsList-change', val)
                },
                deep: true
            }
        },
        methods: {
            minus(index) {//截取函数删除
                this.specialGoodsList.splice(index, 1)
            },
            qiniuyunup(_vm, file, rule) {
                const isJPG = file.type === 'image/jpeg'
                const isPNG = file.type === 'image/png'
                const isFitSize = rule.maxSize ? file.size / 1024 / 1024 < rule.maxSize : 'undefined';
                if (rule.isJPG || rule.isPNG) {
                    if (!isJPG && !isPNG) {
                        _vm.$message.error('图片只能是 JPG/PNG 格式!');
                        return false
                    }
                }
                if (isFitSize != 'undefined' && !isFitSize) {
                    _vm.$message.error('大小不能超过 ' + rule.maxSize + 'MB!');
                    return false
                }
            },
            handleBeforUpload(file) {
                const _this = this
                let rule = {
                    isJPG: true,
                    isPNG: true,
                    maxSize: 2
                }
                var suffix = file.name.split('.')
                if (suffix.length > 1) {
                    this.uploadData.key = new Date().getTime() + '.' + suffix[1]
                    this.uploadData.token = this.$store.state.qiniuToken
                    return this.qiniuyunup(_this, file, rule)
                }
            },
            handleTextUploadSuccess(response, file, fileList) {
                var newFile = {
                    name: file.name,
                    url: window.qiniuHost + response.key
                }
                this.fileTextUploadList = []
                this.fileTextUploadList.push(newFile)
                //添加参数
                let o = {
                    goodsId: '',
                    url: this.fileTextUploadList[0].url
                }
                this.specialGoodsList.push(o)
                this.handleTextRemove()
            },
            handleTextRemove() {
                this.fileTextUploadList = []
            },
            handleUploadError(error, file, fileList) {
                const _this = this
                _this.$message.error('上传失败')
                // window.handleUploadError(_this, error, file, fileList)
            }
        }
    }
</script>
<style>
.addSpecialGoods-form {
  margin-bottom: 20px;
}
.addSpecialGoods-form .el-form-item {
  display: inline-flex;
  margin-bottom: 0;
}
.addSpecialGoods-form .el-form-item__content {
  display: inline-flex;
}
.addSpecialGoods-form .el-form-item__content .el-input {
  margin-right: 5px;
}
.addSpecialGoods-form .el-form-item__content .el-form-item__label {
  padding: 0;
  width: 80px;
  line-height: 36px;
}
.addSpecialGoods-form .operate {
  margin-top: 20px;
}
</style>
